<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- <input placeholder="请输入手机号" class="input" />
        <input
          placeholder="密码"
          class="input"
          type="password"
        /> -->
        <!-- 
          自定义组件的特性：
          当我们给自定义组件添加属性的时候，
          那么这个属性会自动成为组件跟标签的属性(props中的属性除外)

          v-model的作用：
            1、表单元素的value属性和变量双向绑定在一起
            2、能够自动监听input事件，
            并且能将事件处理函数中传递过来的值同步v-model绑定的变量
         -->
        <hmInput ref="name" v-model="user.username" placeholder="请输入账号"
        :reg="rules.phoneReg"
        ></hmInput>
        <hmInput ref="pw" :reg="rules.passwordReg" v-model="user.password" placeholder="请输入密码"></hmInput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <!-- <div class="button">登录按钮</div> -->
      <van-button type="danger" round icon="star-o" block @click="loginFn">登录</van-button>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user.js"
import { rules } from "@/utils/validator.js"
export default {
  data(){
    return {
      user: {
        username: "13234545678",
        password: ""
      },
        rules: rules
    }
  },
  methods: {
    loginFn(){
      // 1、添加判断，用户输入内容是否合法
      // 我们可以直接获取到hmInput组件中的isOk来进行判断
      // 如果获取到isOk呢？答：可以ref属性获取
      // console.log(this.$refs.name ,this.$refs.pw);
      let { name, pw } = this.$refs;
      if(name.isOk === false){
        // alert("手机号码输入错误！");
        this.$toast.fail('手机号码输入错误！');
        return
      }
      if(pw.isOk === false){
        // alert("密码必须3到16位！")
        this.$toast.fail('密码必须3到16位！');
        return
      }
      // 2、判断正确后，添加加载效果
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0  //值为0 表示提示不会自动消失
      });
      // console.log(74, location);
      // 3、调用接口进行请求
      login(this.user).then(res=>{
        console.log(53,res);
        // 4、在请求玩擦后  清除加载效果
          this.$toast.clear()
        // 5、保存登录后获取到的token和用户id
        if(res.data.message === "登录成功"){
          localStorage.setItem("72-token", res.data.data.token)
          localStorage.setItem("72-user-id", res.data.data.user.id)
          // decodeURIComponent(location.href.split("redirectUrl=")[1])
          // 6、 登录成功后，先判断是否需要跳转到首页之外的页面
          // 如果有则跳转到首页之外的页面中，否则跳转到首页 
          // 如何判断是否有需要跳转到首页之外的页面呢？
          // 答：可以通过地址是否存在redirectUrl这个字符串，如果有则需要挑战者到其他页面
          // 否则就没有
          if(location.href.indexOf("redirectUrl=") != -1){
            // 有则跳转到其他页面
            // decodeURIComponent 是原生js方法，用于解析地址栏上的参数
            let url = decodeURIComponent(location.href.split("redirectUrl=")[1]);
            location.href = url;
          }else{
            this.$router.push("/index")
          }
        }else{
          // 6、登录失败提示用户登录失败
          this.$toast.fail(res.data.message)
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>